<template>
  <div class="q-box">
    <el-tabs v-model="activeName" type="card" stretch>
      <el-tab-pane label="题库" name="questions"></el-tab-pane>
      <el-tab-pane label="问卷大纲" name="outline"></el-tab-pane>
    </el-tabs>
    <div v-if="activeName==='questions'">
      <ul>
        <li v-for="(question,index) in questionTypes" :key="index" v-on:click="addQuestion(question)" class="type-item">
          {{question.label}}</li>
      </ul>
    </div>
    <div v-else>
      <SlickList lockAxis="y" v-model="Questions" :lockToContainerEdges="true">
        <SlickItem v-for="(item, index) in Questions" :index="index" :key="index" class="type-item">
          {{index}}.{{ item }}
        </SlickItem>
      </SlickList>
    </div>
  </div>
</template>

<script>
import { SlickList, SlickItem } from "vue-slicksort";
export default {
  components: { SlickList, SlickItem },
  name: "QuestionBox",
  model: {
    prop: "Questions",
    event: "change"
  },
  props: {
    Questions: {
      type: Array,
      require: true,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      activeName: "",
      questionTypes: [
        { type: "single", label: "单选题" },
        { type: "multi", label: "多选题" },
        { type: "blank", label: "填空题" },
        { type: "rate", label: "评分题" }
      ]
    };
  },
  methods: {
    addQuestion(qitem) {
      this.$emit("add-question", qitem);
    },
  },
  mounted() {
    this.activeName = "questions";
    this.questionOutline = this.Questions;
  }
};
</script>

<style scoped>
.q-box {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 280px;
  height: 120%;
  /* min-height: 670px; */
  /* max-height: 700px; */
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border: 1px solid #fff;
}
.q-box li {
  list-style: none;
}
/deep/ .el-tabs__item {
  font-size: 20px;
  color: #222;
  font-weight: 500;
}
.type-item {
  margin: 10px auto;
  padding: 10px;
  width: 70%;
  border: 1px dashed rgba(24, 144, 255, 0.05);
  background: rgba(24, 144, 255, 0.05);
  font-size: 18px;
}
/deep/ .el-tabs__item.is-active {
  color: #409eff;
}
.type-item:hover {
  color: #409eff;
  cursor: pointer;
  border: 1px dashed #1890ff;
}
</style>